<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>添加师资</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/scroll-bar.css">
    <link rel="stylesheet" href="/css/sub-page.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>师资管理</cite></a>
				<a><cite>添加师资</cite></a>
            </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form" id="view">

    </form>
</div>
<script id="editForm" type="text/html">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm9">
            <div class="layui-form-item">
                <label class="layui-form-label">老师姓名</label>
                <div class="layui-input-block">
                    <input type="hidden" name="tid" value="{{d.tid}}">
                    <input type="text" name="tname" placeholder="请输入老师姓名"
                           autocomplete="off" class="layui-input" lay-verify="required" value="{{d.tname}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <input type="text" name="tjob" placeholder="请输入职位或职称"
                           autocomplete="off" class="layui-input" lay-verify="required" value="{{d.tjob}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="input" class="layui-input" name="sort" value="{{d.sort}}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">教师简介</label>
                <div class="layui-input-block">
                <textarea name="intro" placeholder="请输入简介"
                          class="layui-textarea" lay-verify="required" style="height: 130px">{{d.intro}}</textarea>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3">
            <div class="layui-row cms-photo">
                <div class="layui-col-sm12">
                    <img id="articleCover" style="width: 100%;height: auto" src="{{d.photo}}">
                </div>
            </div>
            <div class="layui-row layui-hide">
                <input name="photo" type="text" class="layui-input layui-disabled"
                       lay-verify="required" readonly value="{{d.photo}}">
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传照片
                </button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</script>
<!--js逻辑-->
<script src="/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'upload', 'laytpl'], function () {
        var element = layui.element;
        var form = layui.form;
        let upload = layui.upload;
        let laytpl = layui.laytpl;
        let params = window.location.href;
        let tid = params.substring(params.lastIndexOf('=') + 1);
        let getTpl = editForm.innerHTML,
            view = document.getElementById('view');
        $.get('/manage/teachers/' + tid, function (resp) {
            laytpl(getTpl).render(resp.data, function (html) {
                view.innerHTML = html;
            });
            form.render();
            //上传图片
            upload.render({
                elem: '#uploadImg' //绑定元素
                , url: '/manage/upload/' //上传接口
                , field: 'upload',
                before: function (obj) {
                    layer.load(); //上传loading
                },
                done: function (res) {
                    if (res.uploaded) {
                        $('#articleCover').attr("src", res.url);
                        layer.msg('上传成功')
                        $('input[name="photo"]').val(res.url);
                    } else {
                        layer.alert(res.error.message)
                    }
                    layer.closeAll('loading'); //关闭loading
                },
                error: function () {
                    layer.closeAll('loading'); //关闭loading
                }

            });

            form.on('submit(update)', function (data) {
                //获取富文本框中的内容
                $.ajax({
                    url: '/manage/teachers',
                    data: data.field,
                    // contentType:'application/json',
                    type: 'PUT',
                    //dataType: 'json',
                    success: function () {
                        layer.msg("修改成功！", {icon: 6, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    },
                    error: function () {
                        layer.msg("修改失败！", {icon: 5, time: 1000, anim: 4}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }
                });
                return false;
            });
        }, 'json')
    })
</script>
</body>
</html>
